<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./练习3样式.css">
</head>
<body>
    <div class="box">
        <ul>
            <li><img src="./修罗.webp"></li>
            <li><img src="./刑天.webp"></li>
            <li><img src="./战神刑天.jpg"></li>
            <li><img src="./金刚.webp"></li>
            <li><img src="./飞影.webp"></li>
            <li><img src="./蔡徐坤.webp"></li>
        </ul>
        <span class="iconfont icon-lujing lbut"></span>
        <span class="iconfont icon-a-11 rbut"></span>
        <ol>
            <li style="background-color: red;"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</body>
</html>
<script>
    var imgs=document.querySelectorAll('.box ul img')
    var lbut=document.querySelector('.lbut')
    var rbut=document.querySelector('.rbut')
    var ul=document.querySelector('ul')
    var box=document.querySelector('.box')
    var lis=document.querySelectorAll('ol li')
    var num=0
    var time
    rbut.onclick=function(){
        num++
        if(num>imgs.length-1){
            num=0
        }
        ul.style.left=-num*600+'px'
        change(num)
    }
    lbut.onclick=function(){
        num--
        if(num<0){
            num=imgs.length-1
        }
        ul.style.left=-num*600+'px'
        change(num)
    }
    box.onmouseenter=function(){
        lbut.style.display='block'
        rbut.style.display='block'
        clearInterval(time)
    }
    box.onmouseleave=function(){
        lbut.style.display='none'
        rbut.style.display='none'
        startLunbo()
    }
    function startLunbo(){
        time=setInterval(function(){
            rbut.onclick()
        },1000)
    }

    //排他
    for(i=0;i<lis.length;i++){
        lis[i].setAttribute('index',i)
        lis[i].onclick=function(){
            var index=this.getAttribute('index')
            num=index
            ul.style.left=-num*600+'px'
            change(num)
        }
    }
    function change(index){
        for(i=0;i<lis.length;i++){
                lis[i].style.backgroundColor='white'
            }
            lis[index].style.backgroundColor='red'
    }
</script>